<template>
  <!----------------------解禁市值----------------------->
  <div class='g-content-wrapper'>
    <header-top class="header">解禁市值</header-top>
    <div class='g-content'>

      <state>{{topDesc}}</state>
      <div class='lifted'>
        <tab-bar class='tabBar' :tab-bar='menuTabBar' :on-selected='onBarSelected'></tab-bar>
        <!--图表-->
        <div id="chart" style="position: relative">
          <loading></loading>
          <error :reload="fetchChartData"></error>
          <last-month v-if='msgBar == 0' :chart-data="chartData"></last-month>
          <pre-week v-else-if='msgBar == 1' :chart-data="chartData"></pre-week>
          <pre-month v-else :chart-data="chartData"></pre-month>
        </div>
        <!--明细-->
        <div class="interval"></div>
        <detail-list list-type="a" :list-data="listData" :head-content = 'headContent' :update-time="listUpdateTime">解禁个股明细</detail-list>
        <div class="interval"></div>
        <div class='comment'>
          <h1 class='comment-title'>解禁市值</h1>
          <p>解禁股是指限售股过了限售承诺期，可以在二级市场自由买卖的股票。<br/>
            解禁的股票数量*当时的交易市场价格就等于解禁市值。</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import headerTop from '@/pages/common/HeaderTop.vue'
  import state from '@/pages/common/State.vue'
  import tabBar from '@/pages/common/TabBar.vue'
  import detailList from '@/pages/common/DetailList.vue'
  import preWeek from './children/PreWeek.vue'
  import preMonth from './children/PreMonth.vue'
  import lastMonth from './children/LastMonth.vue'
  import remoteDAO from '@/common/remoteDAO'
  import constant from '@/common/constant'
  import tools from 'libs/common/tools'
  export default {
    name: 'lifted',
    data () {
      return {
        menuTabBar: [{name: '过去一月'}, {name: '未来一周'}, {name: '未来一月'}],
        msgBar: 0,
        headContent: ['名称/代码', '解禁数量/(万股)', '占总股本比例', '当前市值(亿元)'],
        listData: [],
        chartData: {},
        listUpdateTime: '____-__-__（今日）',
        topDesc: ''
      }
    },
    components: {
      headerTop,
      state,
      tabBar,
      detailList,
      preWeek,
      preMonth,
      lastMonth
    },
    methods: {
      onBarSelected (index) {
        if (this.msgBar == index) return;
        this.$store.dispatch('showLoading');
        this.msgBar = index;
        this.fetchChartData(this.msgBar)
      },
      async fetchList () {
        try {
          let res = await remoteDAO.invoke(constant.InterfaceEnum.GET_TODAY_LIFTED, null);
          if (!res.data) return;
          this.listData = res.data;
          this.listUpdateTime = `${tools.DateFormat(new Date(), 'yyyy-MM-dd')}（今日）`
        } catch (err) {
          alert(err)
        }
      },
      async fetchChartData () {
        try {
          let res = await remoteDAO.invoke(constant.InterfaceEnum.GET_LIFTED, {type: this.msgBar})
          if (!res.amount) return;
          this.chartData = res
        } catch (err) {
          alert(err)
          this.$store.dispatch('showError');              //  请求失败   error显示
        }
      },
      async fetchTopDesc() {
        let res = await remoteDAO.invoke(constant.InterfaceEnum.GET_TOP_DESC, {type: 9});
        this.topDesc = res
      }
    },
    created() {
      this.$store.dispatch('showLoading');
      this.fetchList();
      this.fetchChartData();
      this.fetchTopDesc();
    }
  }
</script>
<style lang='less' scoped>
  @import '../../assets/css/cssReset';
  @import '../../assets/css/variables';
  .tabBar{
    border-top: 1px #ddd solid;
    margin: 0;
    padding: .15rem 0;
  }
</style>
